@charset "utf-8";
.Panel.SloganList { display: table; height: 15%; top: -15%; background-color: rgba(255,255,255,0.1); text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 35px; color: #fff; line-height: 15% }
.Panel.Track { position: absolute; top: 15%; height: 76%; left: 0; opacity: 0; width: 96%; left: 50%; margin-left: -48%; display: none }
.tracklist { overflow: hidden; width: 100%; position: relative }
.player { position: absolute; width: 64px; height: 64px; overflow: visible; transition: all 1s; -webkit-transition: all .5s; -webkit-transition: all .5s }
.player .head { border-radius:100%; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff no-repeat; background-size: contain; transition: all 1s; -webkit-transition: all .5s; -webkit-transition: all .5s }
.player .nickname { position: absolute; height: 70px; width: 200px; font-size: 20px; line-height: 70px; text-align: right; top: 50%; margin-top: -35px; left: -250px; color: #fff }
.player.result .nickname { margin-top: auto; top: -70px; left: 50%; margin-left: -100px; text-align: center }
.Track .trackline { position: relative; width: 100%; background: url(../images/shake/track.jpg) repeat-x; background-size: contain }
.Track .trackline:nth-child(2n){
position: relative;
width: 100%;
background: url(track2.jpg) repeat-x;
background-size: contain;
}
.track-start { position: absolute; background: url(../images/shake/track_line.png) right center no-repeat; background-size: contain; top: 0; left: 0; text-align: center; color: #fff; font-family: Arial, Helvetica, sans-serif }
.track-end { position: absolute; background: url(../images/shake/track_line.png) left center no-repeat; background-size: contain; top: 0; right: 0 }
.round-welcome { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 91%; background-color: rgba(0, 0, 0, 0.9);}
.round-welcome .qr { width: 430px; height: 430px; position: absolute; left: 50%; top: 50%; margin-top: -215px; margin-left: -215px;border-radius: 15px;
box-shadow: 0 10px 10px #000; }
.round-welcome .closebutton { cursor: pointer; width: 50px; height: 50px; position: absolute; right: 0; top: 0; background: url(../images/shake/screen_icons.png) -285px 0 no-repeat }
.round-welcome .label { position: absolute; color: #fff; line-height: 70px; text-align: center; font-size: 35px; width: 100% }
.round-welcome .label.top { top: 0 }
.round-welcome .label.bottom { bottom: 0 }
.round-welcome .label.bottom .shake-icon { display: inline-block; position: relative; width: 40px; height: 40px; background: url("../images/shake/shake_label.png") no-repeat; background-size: contain; top: 8px }
.round-welcome .label .activity_key { color: #f6ff27; padding: 0 4px; font-weight: bold }
.round-label {
    position: absolute;
    width: 128px;
    height: 64px;
    background: url(../images/shake/shake_label.png) top center no-repeat;
    padding: 80px 0 0 0;
    text-align: center;
    font-size: 25px;
    color: #fff;
    top: 30%;
    margin-top: -72px;
    right: 50%;
    margin-right: -420px;
    cursor: pointer;
}
.round-label2 {
    position: absolute;
    text-align: center;
    font-size: 14px;
    color: #fff;
    left: 15%;
	top:12%;
    cursor: default;
    font-weight: bold;
}
.button-start {
    position: absolute;
    width: 128px;
    height: 64px;
    background: url(../images/shake/start.png) top center no-repeat;
    padding: 80px 0 0 0;
    text-align: center;
    font-size: 25px;
    color: #fff;
    top: 60%;
    margin-top: -72px;
    right: 50%;
    margin-right: -420px;
    cursor: pointer;
}
.radar{
	top: 32% ;
	left:7%;
	width: 400px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	display: none
}
.user-item:nth-child(1) {
	left: 20px;
	top: 120px
}

.user-item:nth-child(2) {
	left: 100px;
	top: 10px
}

.user-item:nth-child(3) {
	left: 250px;
	top: 12px
}

.user-item:nth-child(4) {
	left: 310px;
	top: 120px
}

.user-item:nth-child(5) {
	left: 250px;
	top: 250px
}

.user-item:nth-child(6) {
	left: 100px;
	top: 250px
}

.user-item:nth-child(7) {
	left: 180px;
	top: 70px
}

.user-item:nth-child(8) {
	left: 240px;
	top: 130px
}

.user-item:nth-child(9) {
	left: 120px;
top: 130px;
}

.user-item:nth-child(10) {
	left: 180px;
	top: 180px
}
.round {
	border: 1px solid rgba(255,255,255,0.5);
	margin: 50px auto
}

.w300 {
	width: 298px;
	height: 298px;
	border-radius: 298px;
	margin-top: 0;
	overflow: hidden
}

.w200 {
	width: 200px;
	height: 200px;
	border-radius: 200px
}

.w100 {
	width: 100px;
	height: 100px;
	border-radius: 100px
}

.w1 {
	width: 1px;
	height: 1px;
	border-radius: 1px;
	background-color: #fff;
	position: relative;
	top: -4px
}

.line {
	width: 150px;
	height: 150px;
	border-left: 1px solid rgba(255,255,255,0.6);
	border-radius: 0 0 150px 0;
	background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.5));
	background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,0.5));
	background: -webkit-gradient(linear,40% 0,0 100%,from(rgba(255,255,255,0)),to(rgba(255,255,255,0.5)));
	position: absolute;
	left: 0;
	top: 0;
	-moz-transform: rotate(0);
	-moz-transform-origin: 0 0;
	-webkit-transform: rotate(0);
	-webkit-transform-origin: 0 0;
	-o-transform: rotate(0);
	-o-transform-origin: 0 0;
	transform: rotate(0);
	transform-origin: 0 0
}

.roundMove {
	-webkit-animation: round 3s both linear infinite;
	-moz-animation: round 3s both linear infinite;
	-o-animation: round 3s both linear infinite;
	animation: round 3s both linear infinite
}

@-webkit-keyframes round {
	0 {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg)
	}
}

@-moz-keyframes round {
	0 {
		-moz-transform: rotate(0)
	}

	100% {
		-moz-transform: rotate(360deg)
	}
}

@-o-keyframes round {
	0 {
		-o-transform: rotate(0)
	}

	100% {
		-o-transform: rotate(360deg)
	}
}

@keyframes round {
	0 {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.user-item {
	position: absolute;
	left: 20px;
	top: 70px;
	width: 50px;
	height: 70px;
	overflow: hidden;
	text-align: center;
	opacity: 0
}



.user-item .user-img {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50px;
	background-color: #fff
}

.user-item .user-img img {
	width: 44px;
	height: 44px;
	border-radius: 44px;
	overflow: hidden;
	display: block;
	margin: 3px auto
}

.user-item p {
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	text-align: center;
	color: #fff;
	font-size: 12px;
	margin:0;
}
.cutdown-start { position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; display: none; text-align: center; color: #fff  ; }
.result-layer { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 91%; background-color: rgba(0,0,0,0.6)  ; }
.result-label { display: none; text-align: center; width: 100%; height: 80px; line-height: 80px; font-size: 80px; font-family: Helvetica; position: absolute; left: 0; top: 50%; margin-top: -40px; color: #ff0; text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ffa225, 0 0 70px #ffa342 }
.result-cup { display: none; position: absolute; width: 500px; height: 300px; background: url(../images/shake/shake_cup.png) center bottom no-repeat; top: 50%; margin-top: -150px; left: 50%; margin-left: -250px; text-align: center }
.result-cup .button { font-size: 18px; position: relative; margin: 16px; bottom: -300px; color: #fff; display: inline-block; padding: 12px; border: 1px solid #fff; cursor: pointer; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; background-color: #4f4b4b; background: -moz-linear-gradient(top, #4f4b4b, #0f070a); background: -ms-linear-gradient(top, #4f4b4b, #0f070a); background: -webkit-gradient(linear, 0 0, 0 100%, from(#4f4b4b), to(#0f070a)) }
.result-cup .button.reset { border: 1px solid red }
.cutdownan-imation { -webkit-animation: cutdownan-keyframes 1000ms infinite ease both; -moz-animation: cutdownan-keyframes 1000ms infinite ease bot }
@-webkit-keyframes cutdownan-keyframes { 0 {
opacity:0;
-webkit-transform:scale(.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.05)
}
70% {
-webkit-transform:scale(.9)
}
100% {
-webkit-transform:scale(6);
opacity:0
}
}
@-moz-keyframes cutdownan-keyframes { 0 {
opacity:0;
-moz-transform:scale(.3)
}
50% {
opacity:1;
-moz-transform:scale(1.05)
}
70% {
-moz-transform:scale(.9)
}
100% {
-moz-transform:scale(6);
opacity:0
}
}
.shake { -webkit-backface-visibility: visible; -webkit-transform-origin: 50% 100%; -webkit-animation: shake_frames .3s 0 infinite ease normal none }
@-webkit-keyframes shake_frames { 0 {
-webkit-transform:rotate(3deg)
}
24% {
-webkit-transform:rotate(0)
}
49% {
-webkit-transform:rotate(-3deg)
}
74% {
-webkit-transform:rotate(0)
}
100% {
-webkit-transform:rotate(3deg)
}
}
.rotateout { -webkit-animation: rotateOut_frames 1s .2s ease both; -moz-animation: rotateOut_frames 1s .2s ease both }
@-webkit-keyframes rotateOut_frames { 0 {
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform:rotate(-90deg);
opacity:0
}
}
@-moz-keyframes rotateOut_frames { 0 {
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform:rotate(-90deg);
opacity:0
}
}
.leftin { -webkit-animation: fadeInLeftBig_frames 1s .2s ease both; -moz-animation: fadeInLeftBig_frames 1s .2s ease both }
@-webkit-keyframes fadeInLeftBig_frames { 0 {
opacity:0;
-webkit-transform:translateX(-2000px)
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInLeftBig_frames { 0 {
opacity:0;
-moz-transform:translateX(-2000px)
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
.bounce { -webkit-animation: bounce_frames .3s .2s ease both; -moz-animation: bounce .3s .2s ease both }
@-webkit-keyframes bounce_frames { 0, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-30px)
}
60% {
-webkit-transform:translateY(-15px)
}
}
@-moz-keyframes bounce_frames { 0, 20%, 50%, 80%, 100% {
-moz-transform:translateY(0)
}
40% {
-moz-transform:translateY(-30px)
}
60% {
-moz-transform:translateY(-15px)
}
}
.rock { -webkit-animation: rock_frames 1s .2s ease both; -moz-animation: rock_frames 1s .2s ease both }
@-webkit-keyframes rock_frames { 0, 100% {
-webkit-transform:translateX(0)
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(-10px)
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(10px)
}
}
@-moz-keyframes rock_frames { 0, 100% {
-moz-transform:translateX(0)
}
10%, 30%, 50%, 70%, 90% {
-moz-transform:translateX(-10px)
}
20%, 40%, 60%, 80% {
-moz-transform:translateX(10px)
}
}
.fadein { -webkit-animation: fadeIn_frames 1s .2s ease both; -moz-animation: fadeIn_frames 1s .2s ease both }
@-moz-keyframes fadeIn_frames { 0 {
opacity:0
}
100% {
opacity:1
}
}
@-moz-keyframes fadeIn_frames { 0 {
opacity:0
}
100% {
opacity:1
}
}
.leftfadein { -webkit-animation: leftfadein-keyframes .5s .2s ease both; -moz-animation: fadeInLeft-keyframes .5s .2s ease both }
@-webkit-keyframes leftfadein-keyframes { 0 {
opacity:0;
-webkit-transform:translateX(-100px)
}
60% {
opacity:1;
-webkit-transform:translateX(0)
}
80% {
-webkit-transform:translateX(-10px)
}
100% {
-webkit-transform:translateX(0)
}
}
@-moz-keyframes leftfadein-keyframes { 0 {
opacity:0;
-moz-transform:translateX(-100px)
}
60% {
opacity:1;
-moz-transform:translateX(0)
}
80% {
-moz-transform:translateX(-10px)
}
100% {
-moz-transform:translateX(0)
}
}
.pulse { -webkit-animation: pulse-keyframes .5s ease both; -moz-animation: pulse-keyframes .5s ease both }
@-webkit-keyframes pulse-keyframes { 0 {
-webkit-transform:scale(1)
}
50% {
-webkit-transform:scale(1.1)
}
100% {
-webkit-transform:scale(1)
}
}
@-moz-keyframes pulse-keyframes { 0 {
-moz-transform:scale(1)
}
50% {
-moz-transform:scale(1.1)
}
100% {
-moz-transform:scale(1)
}
}